<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <div class="todo-container">
        <div class="todo-wrap">
        <TodoHeader :addTodo="addTodo"/>
        <TodoList :todos="todos" :deleteTodo="deleteTodo"/>
        <TodoFooter :todos="todos" :deleteCompleteTodos="deleteCompleteTodos " :selectAll="selectAll"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  //第一步引入标
    import TodoHeader from './components/TodoHeader'
    import TodoList from './components/TodoList'
    import TodoFooter from './components/TodoFooter'

    export default {

      //初始化数据
      data(){
        return{
          todos:[
            {title:'吃饭',complete:false},
            {title:'睡觉',complete:true},
            {title:'打游戏',complete:false}
          ]
        }
      },
      methods:{
        addTodo(todo){
          //追加到数组后面
          this.todos.unshift(todo);
        },
        deleteTodo (index) {
          this.todos.splice(index, 1)
        },
        // 删除所有已完成的
        deleteCompleteTodos () {
          this.todos = this.todos.filter(todo => !todo.complete)
        },
        // 全选/全不选
        selectAll (isSelectAll) {
          this.todos.forEach(todo => {
            todo.complete = isSelectAll
          })
        }
      },


      //映射标签
      components: {TodoHeader,TodoFooter, TodoList},
    }
</script>

<style>
  .todo-container {
    width: 600px;
    margin: 0 auto;
  }
  .todo-container .todo-wrap {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  /*header*/


</style>
